=<template>
  <div class="keyexam index">
    <Header></Header>
    <div class="main2">
      <p class='current-nav'>当前位置 : <router-link to='index'>首页</router-link> <i> > </i>
        <router-link to='assessed'>{{varname}}应急预案评审</router-link> <i> > </i>要素评审
      </p>

      <div class="infor search">
        <div class="form-container clearfix">
           <div class="left-box">
<p v-if="tit.length > 0" style="color:#4080ff;padding:20px;font-size:14px;">{{tit}}</p> 
            <iframe v-else :src="leftImg"
                    frameborder="0"
                    scrolling="no"
                    width="100%"
                    height="100%"></iframe>
           
          </div>
          <div class="right-box" ref="element" >
            <div class='bts-group'>
              <el-button v-for='(item,index) in uploadType'
                         :key='index'
                         @click='goPath(item.path)'
                         :class='activeIndex2==index ? "sure":""'>{{item.name}}</el-button>
            </div>
            <div v-loading='loading'>
            <h3 class="table-name"> 电力企业综合应急预案要素评审表</h3>
            <table border="1" v-if='data.length>0' >
              <thead>
                <tr>
                  <th rowspan="2"
                      colspan="2">评审项目</th>
                  <th rowspan="2">评审内容及要求</th>
                  <th colspan="3"> 评审意见</th>
                </tr>
                <tr>
                  <th>符合</th>
                  <th>不符合</th>
                  <th>基本符合</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="5"
                      style="width:80px;">{{data[0].reviewItemOne}}</td>
                  <td style="width:100px;">{{data[0].reviewItemTwo}}</td>
                  <td>
                    <p>{{data[0].reviewContent}}</p>
                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex1=item'
                      :class="radiosIndex1 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[1].reviewItemTwo}}</td>
                  <td>
                    <p>{{data[1].reviewContent}}</p>
                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex2=item'
                      :class="radiosIndex2 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[2].reviewItemTwo}}</td>
                  <td>
                       <p>{{data[2].reviewContent}}</p>

                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex3=item'
                      :class="radiosIndex3 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[3].reviewItemTwo}}</td>
                  <td>
                      <p>{{data[3].reviewContent}}</p>

                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex4=item'
                      :class="radiosIndex4 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[4].reviewItemTwo}}</td>
                  <td>
                        <p>{{data[4].reviewContent}}</p>

                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex5=item'
                      :class="radiosIndex5 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td colspan="2">{{data[5].reviewItemTwo}}</td>
                  <td>
                     <p>{{data[5].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex6=item'
                      :class="radiosIndex6 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td rowspan="2"
                      style="padding:0 10px;">{{data[6].reviewItemOne}}</td>
                  <td>
                    <p style="padding:0 10px;text-align:center;">{{data[6].reviewItemTwo}}</p>
                  </td>
                  <td>
                     <p>{{data[6].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex7=item'
                      :class="radiosIndex7 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>
                    <p style="padding:0 10px;text-align:center;width:120px;">{{data[7].reviewItemTwo}}</p>
                  </td>
                  <td>
                    <p>{{data[7].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex8=item'
                      :class="radiosIndex8 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td rowspan="2"
                      style="padding:0 10px;">{{data[8].reviewItemOne}}</td>
                  <td>
                    <p style="padding:0 10px;text-align:center;">{{data[8].reviewItemTwo}}</p>
                  </td>
                  <td>
                     <p>{{data[8].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex9=item'
                      :class="radiosIndex9 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>
                    <p style="padding:0 10px;text-align:center;">{{data[9].reviewItemTwo}}</p>
                  </td>
                  <td>
                     <p>{{data[9].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex10=item'
                      :class="radiosIndex10 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td rowspan="4"
                      style="padding:0 10px;">{{data[10].reviewItemOne}}</td>
                  <td>
                    <p style="padding:0 10px;text-align:center;width:120px;">{{data[10].reviewItemTwo}}</p>
                  </td>
                  <td>
                      <p>{{data[10].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex11=item'
                      :class="radiosIndex11 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>
                    <p style="padding:0 20px;text-align:center;">{{data[11].reviewItemTwo}}</p>
                  </td>
                  <td>
                      <p>{{data[11].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex12=item'
                      :class="radiosIndex12 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>
                    <p style="padding:0 20px;text-align:center;">{{data[12].reviewItemTwo}}</p>
                  </td>
                  <td>
                     <p>{{data[12].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex13=item'
                      :class="radiosIndex13 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>
                    <p style="padding:0 20px;text-align:center;">{{data[13].reviewItemTwo}}</p>
                  </td>
                  <td>
                      <p>{{data[13].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex14=item'
                      :class="radiosIndex14 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td colspan="2">{{data[14].reviewItemTwo}}</td>
                  <td>
                    <p>{{data[14].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex15=item'
                      :class="radiosIndex15 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td colspan="2">{{data[15].reviewItemTwo}}</td>
                  <td>
                     <p>{{data[15].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex16=item'
                      :class="radiosIndex16 == item ? 'div-radio1' : 'div-radio2'"></td>
                </tr>
                <tr>
                  <td colspan="2">{{data[16].reviewItemTwo}}</td>
                  <td>
                     <p>{{data[16].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex17=item'
                      :class="radiosIndex17 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td rowspan="5"
                      style="width:80px;padding:0 10px;">{{data[17].reviewItemOne}}</td>
                  <td style="width:100px;">{{data[17].reviewItemTwo}}</td>
                  <td>
                      <p>{{data[17].reviewContent}}</p>
                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex18=item'
                      :class="radiosIndex18 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[18].reviewItemTwo}}</td>
                  <td>
                     <p>{{data[18].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex19=item'
                      :class="radiosIndex19 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[19].reviewItemTwo}}</td>
                  <td>
                     <p>{{data[19].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex20=item'
                      :class="radiosIndex20== item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[10].reviewItemTwo}}</td>
                  <td>
                    <p>{{data[20].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex21 = item'
                      :class="radiosIndex21 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td>{{data[21].reviewItemTwo}}</td>
                  <td>
                    <p>{{data[21].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex22=item'
                      :class="radiosIndex22 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td colspan="6">
                    <p>注：“＊”代表应急预案的关键要素。</p>
                  </td>

                </tr>
                <tr>
                  <td colspan="2">评审专家签字</td>
                  <td  colspan="4" @click="firstFlag" class="sign-word">
                    <img :src="signImg" alt="" >    
                  </td>
                </tr>
              </tbody>
            </table>
            <h3 class="table-name"> 电力企业专项应急预案要素评审表</h3>
            <table border="1"  v-if='data.length>0'>
              <thead>
                <tr>
                  <th rowspan="2"
                      colspan="2">评审项目</th>
                  <th rowspan="2">评审内容及要求</th>
                  <th colspan="3"> 评审意见</th>
                </tr>
                <tr>
                  <th>符合</th>
                  <th>不符合</th>
                  <th>基本符合</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="2">{{data[22].reviewItemTwo}}</td>
                  <td>
                    <p>{{data[22].reviewContent}}</p>
                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex23=item'
                      :class="radiosIndex23 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td rowspan="2"
                      style="width:80px;padding:0 10px;">{{data[23].reviewItemOne}}</td>
                  <td style="width:100px;padding:0 10px;">
                    <p style='text-align:center;'>{{data[23].reviewItemTwo}}</p>
                  </td>
                  <td>
                     <p>{{data[23].reviewContent}}</p>
                  </td>
                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex24=item'
                      :class="radiosIndex24 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td style="width:100px;padding:0 10px;">
                    <p style='text-align:center;'>{{data[24].reviewItemTwo}}</p>
                  </td>
                  <td>
                     <p>{{data[24].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex25=item'
                      :class="radiosIndex25 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                 <tr>
                  <td style="width:100px;padding:0 10px;" colspan="2">
                    <p style='text-align:center;'>{{data[25].reviewItemTwo}}</p>
                  </td>
                  <td>
                    <p>{{data[25].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex26=item'
                      :class="radiosIndex26 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                 <tr>
                  <td style="width:100px;padding:0 10px;" colspan="2">
                    <p style='text-align:center;'>{{data[26].reviewItemTwo}}</p>
                  </td>
                  <td>
                    <p>{{data[26].reviewContent}}</p>
                  </td>

                  <td v-for='item in radios'
                      :key='item'
                      @click='radiosIndex27=item'
                      :class="radiosIndex27 == item ? 'div-radio1' : 'div-radio2'"></td>

                </tr>
                <tr>
                  <td colspan="6">
                    <p>注 : "*"代表应急预案的关键要素。如果专项应急预案作为综合应急预案的附件,综合应急预案已经明确胡要素,专项应急预案可省略。</p>
                  </td>

                </tr>
                <tr>
                  <td colspan="2">评审专家签字</td>
                  <td colspan="4" @click="signFlag = true" class="sign-word"> 
                    <img  :src="signImg" alt="" >    
                  </td>

                </tr>
              </tbody>
            </table>
            </div>
            <div class="bts" >

              <el-button class='sure' @click="saveData(0)">保存</el-button>
              <el-button class='sure' 
                         @click="saveData(1)">下一步</el-button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../common/header2'
import config from '../../config.js'
import Footer from '../common/footer'
import { setTimeout } from 'timers';
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      data:[],
      tit:'',
      leftImg:'',
      loading:false,
      reviewTemplateName:'',
      varname:"",
      planSummaryId:'',
      signImg:'',
      radiosIndex1:4 ,
      radiosIndex2:4 ,
      radiosIndex3:4 ,
      radiosIndex4:4 ,
      radiosIndex5:4 ,
      radiosIndex6: 4 ,
      radiosIndex7: 4 ,
      radiosIndex8: 4 ,
      radiosIndex9: 4 ,
      radiosIndex10:4 , 
      radiosIndex11:4 , 
      radiosIndex12: 4 ,
      radiosIndex13: 4 ,
      radiosIndex14: 4 ,
      radiosIndex15: 4 ,
      radiosIndex16: 4 ,
      radiosIndex17: 4 ,
      radiosIndex18: 4 ,
      radiosIndex19: 4 ,
      radiosIndex20: 4 ,
      radiosIndex21: 4 ,
      radiosIndex22: 4 ,
      radiosIndex23: 4 ,
      radiosIndex24: 4 ,
      radiosIndex25: 4 ,
      autograph:'',
      radiosIndex26: 4 ,
      radiosIndex27: 4 ,
      radios: [1, 2, 3],
      uploadType: [
        {
          name: '形式评审',
          path: 'situationexam'
        },
        {
          name: '要素评审',
          path: 'keyexam'
        },
        {
          name: '附件要素评审',
          path: 'powerexam'
        },
        {
          name: '个人评审意见',
          path: 'personexam'
        }
      ],

      activeIndex2: 1,
    };
  },
  mounted(){
    this.getData()
     this.getLeftUrl()
     this.signImg = localStorage.signImg
      this.autograph =localStorage.autograph
      setTimeout(()=>{
        document.querySelector('.left-box').style.height =  (this.$refs.element.offsetHeight-136) + 'px'
      },1000)
      
    
     
  },
  methods:{
    goPath(path){
this.saveData(2,path)
    },
    firstFlag(){
        this.signFlag = true
        this.signFlag2 = true
    },
     lookstatus(item){
          let  baseUrl = item.viewUrl;
          var urlpath = baseUrl.indexOf("?") + 1;
          urlpath = baseUrl.substring(urlpath);
          var arrapi = urlpath.split("&");
          let  uesrMessage = {}
          arrapi.forEach(
              (item)=>{
                  var brrapi = [];
                  brrapi = item.split("=");
                  uesrMessage[brrapi[0]] = brrapi[1];
              }
          )

          let id = uesrMessage.srcFid;
          let  expires = Date.parse(new Date());
          let a = "FastDFS1234Bossien"+id +expires
          console.log(a);
          let token = this.$md5(a)
          token = token.toUpperCase()
          let that = this;
          $.ajax({
              url:config.baseUrl3+"queryPublishFileInfo.do?appId=001&srcFid="+id+"&expires="+expires+"&token="+token,
              type:'GET', //GET
              async:false,    //或false,是否异步
              data:{
              },
              timeout:5000,    //超时时间
              success:function(data,textStatus,jqXHR){
                let status = JSON.parse(data);
                if(!status.success){
                   that.tit= "文件正在转码中..."
                }
                if(status.dataObj.srcFileStatusName=="12"){
                    that.leftImg = item.viewUrl
                }else{
                    that.tit= "文件正在转码中..."
                }
              },
              error:function(xhr,textStatus){
              },
              complete:function(){
              }
          })
      },
     getLeftUrl(){
      this.postData(1)
          .then(res => {
            if (res.data.meta.success) {
             this.lookstatus(res.data.data)
            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
    },
    getData(){
      this.loading=true
       this.postData(0,2)
        .then( res=> {
           this.loading=false
            if (res.data.meta.success) {
                this.varname = res.data.data.companyName
               res.data.data.list.map((item,index)=>{
                  if(item.selectResult){

                 this['radiosIndex'+(index+1)] = item.selectResult
                  }
                  
                })
                this.data = res.data.data.list
            } else {
               this.$message.warning(res.data.meta.message)
            }
        })
        .catch(function (res) {
           console.log(res)
        })
    },
    saveData(n,path){
      let list=[]
      let flag=false
      this.data.map((item,index)=>{

        if(this['radiosIndex'+(index+1)] == 4){
           flag=true
        }else{
          let obj={
                tableId:item.id,
            result:this['radiosIndex'+(index+1)] 
          }
          list.push(obj)
          console.log(this['radiosIndex'+(index+1)] )
        }
       
      })
      
      if(flag){
         this.$message.warning('请选择完毕后再保存')
      }else{
      this.postData(2,2,list,this.autograph)
          .then(res => {
            if (res.data.meta.success) {
              if(n==1){
                 this.$router.push('powerexam')
              }else if(n==2){
               this.$router.push(path)
              }else{
                
              this.$message.success(res.data.meta.message)
              }
            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.keyexam {
  .search {
    .form-container {
      padding: 0 0 70px;
      margin: 0 auto;
      .bts-group {
        width: 510px;
        margin: 0 auto 30px;
        .el-button {
          width: 120px;
          color: #3f80fe;
          border-radius: 8px;
          border: 1px solid #3f80fe;
        }
        .sure {
          color: #fff;
          background: #4080ff;
         /* background: linear-gradient(90deg, #6eb1ff 20%, #3372ff 80%);*/
        }
      }
      .bts {
        text-align: center;
        width: 100%;
        .el-button {
          float: none;
        }
        .sure {
          color: #fff;
          background: #4080ff;
          /*background: linear-gradient(90deg, #6eb1ff 20%, #3372ff 80%);*/
        }
      }
      tr {
        p {
          line-height: 30px;
          text-align: left;
        }
      }
    }
  }
}
</style>
